<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="font_3702579_4ygcdyap1tu/iconfont.css">
    <title>20302120102-康明宇</title>
    <link rel="stylesheet" href="CSS/dljm.css">
</head>
<body>
    <div id="fh"><a href="#">X</a></div>
    <img src="image/dlym/dptb.png" class="img">
    <form action="" method="post" id="fm" name="fm" onsubmit="return checkform()">
            <p><input type="text" id="user" name="user" class="input" placeholder="输入账号名/邮箱/手机号"></p>
            <p><input type="password" id="pwd" name="pwd" class="input" placeholder="输入密码">
                <span><a href="#">找回密码</a></span>
            <p><span>验证码：</span><span id="yzm"></span><span id="btn">点击生成验证码</span></p>
            <p>输入验证码：<input type="text" id="yztext" placeholder="请输入验证码"></p>
            <input type="submit" value="登录" id="yzbutton">
            <input name="yhxz" value="male" id="yhxz" type="radio"><span class="span1">同意<span class="span2">《京喜隐私政策》《用户授权须知》</span></span>
    </div>

    <div id="tsxx">
        <p>表单验证，模拟登陆</p>
        <p>用户账号：17642124162</p>
        <p>用户密码：00000000</p>
    </div>
    
    <script>
    var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
	
    sjyzm(arr);

    var btn = document.getElementById("btn");
    btn.onclick = function(){

        sjyzm(arr);

    } 
    

    function sjyzm(arr){

        var yzm1 = Math.floor(Math.random() * arr.length);
        var yzm2 = Math.floor(Math.random() * arr.length);
        var yzm3 = Math.floor(Math.random() * arr.length);
        var yzm4 = Math.floor(Math.random() * arr.length);
        var yzm5 = Math.floor(Math.random() * arr.length);
        var yzm6 = Math.floor(Math.random() * arr.length);
        var n = arr[yzm1] + arr[yzm2] + arr[yzm3] + arr[yzm4] + arr[yzm5] + arr[yzm5];
        yzm.innerHTML = n

    }

        var yzbutton = document.getElementById("yzbutton");

        var user = document.getElementById("user");
        var dl= document.getElementById("dl");
        var pwd = document.getElementById('pwd');

        //onchange:内容改变 onfoucs:获得焦点 onblur:失去焦点.

        function checkuser(){
            if(user.value.length != 11){
                alert("手机号格式不正确");
                return;
            }
        }

        function checkpwd(){
            if(pwd.value.length < 6 && user.value.length > 11 && pwd.value.length==""){
                alert("密码长度有误");
                return;
            }
        }

        function checkform(){
        
            var user = document.getElementById("user").value;

            var pwd = document.getElementById("pwd").value;

            var rs = checkuser()*checkpwd();
            if(rs == 0){
                alert("信息不能为空！");
                return false;
            }

            checkuser();

            checkpwd();

            var yzm = document.getElementById("yzm").innerHTML;
        
            var yztext = document.getElementById("yztext").value;

            if (yzm.length <= 0){
                alert("请输入验证码！");
                return;
            }
            else if(yzm.toUpperCase() != yztext.toUpperCase()){
                alert("验证码输入有误！");
                return;
            }else{
                alert("验证码正确！");
            }

            if(user=="17642124162" && pwd=="00000000"){
                alert("登陆成功");
                window.location.href="index.html";
                return false;
            }else{
                alert("您的账号或密码有误");
            }
        }
    </script>
</body>
</html>